import Vuex from "vuex";
import Vue from "vue";
import { mainApi, rewardApi } from "@/service";
import { getQuery } from "@/utils/util";

Vue.use(Vuex);

const mainPage = {
  state: () => ({
    drawStartDate: "2021-06-08",
    drawEndDate: "2021-07-18",
    activeEndDate: "",
    serviceTime: "",
    recordId: "",
    memberDetail: {
      getState: "",
      prizeDate: "",
      tomorrowState: "",
      wayType: "",
      shareCount: "",
      redPackageNum: "",
      cashAmount: "",
      prizeDetail: {
        prizeType: "",
        price: "",
        prizeName: "",
        subTitle: "",
        accountState: "1"
      }
    }
  }),
  mutations: {
    changeMainPage(state, payload) {
      const {
        drawStartDate,
        drawEndDate,
        activeEndDate,
        serviceTime = new Date(),
        recordId,
        memberDetail
      } = payload;

      state.drawStartDate = drawStartDate;
      state.drawEndDate = drawEndDate;
      state.activeEndDate = activeEndDate;
      state.serviceTime = serviceTime;
      state.recordId = recordId;
      state.memberDetail = memberDetail;
    }
  },
  getters: {
    prizeType: state => {
      return state.memberDetail.prizeDetail.prizeType;
    }
  },
  actions: {
    async main({ commit, rootState }) {
      const {
        app: { isLogin = false }
      } = rootState;

      if (isLogin) {
        try {
          commit("changeShowLoading", true);

          setTimeout(() => {
            commit("changeShowLoading", false);
          }, 500);
          let res = await mainApi();
          commit("changeMainPage", res);
        } catch (e) {
          console.log(e);
        }
        // debugger;
        // bs.refresh();
      }
    }
  }
};

const winList = {
  state: () => ({
    winningList: [
      {
        mobileNo: "12345678919",
        prizeType: "1",
        prizeName: "xxxxx"
      },
      {
        mobileNo: "12345678919",
        prizeType: "1",
        prizeName: "xxxxx"
      },
      {
        mobileNo: "12345678919",
        prizeType: "1",
        prizeName: "xxxxx"
      },
      {
        mobileNo: "12345678919",
        prizeType: "1",
        prizeName: "xxxxx"
      }
    ]
  })
};

const prizeListM = {
  state: () => ({
    isFirstPrize: "",
    account: "",
    accountName: "",
    redPackageNum: "",
    cashAmount: "",
    prizeList: [],
    cashList: []
  }),
  mutations: {
    changePrizeListM(state, payload) {
      const {
        isFirstPrize,
        account,
        accountName,
        redPackageNum,
        cashAmount,
        prizeList,
        cashList
      } = payload;

      state.isFirstPrize = isFirstPrize || "";
      state.account = account || "";
      state.accountName = accountName || "";
      state.redPackageNum = redPackageNum || "";
      state.cashAmount = cashAmount || "";
      state.prizeList = prizeList || [];
      state.cashList = cashList || [];
    }
  },
  actions: {
    async reward({ commit, rootState }) {
      const {
        mainPage: { recordId }
      } = rootState;

      const otherRecodeId = getQuery("recordId");
      let res = await rewardApi({ recordId: recordId || otherRecodeId });
      commit("changePrizeListM", res);
      commit("changeForm", { account: res.account, name: res.accountName });
    }
  }
};

const modalStatus = {
  state: () => ({
    isPrizeTab: false,
    isHelpSuc: true,
    isHelp: false,
    isAlipay: false,
    isActRule: false,
    isCanvasShow: false,
    isShare: true,
    showTimePicker: false,
    showProgramPicker: false,
    showLoading: false
  }),
  mutations: {
    changePrizeTab(state, payload) {
      state.isPrizeTab = payload;
    },
    changeHelpSuc(state, payload) {
      state.isHelpSuc = payload;
    },
    changeHelp(state, payload) {
      state.isHelp = payload;
    },
    changeAlipay(state, payload) {
      state.isAlipay = payload;
    },
    changeActRule(state, payload) {
      state.isActRule = payload;
    },
    changeCanvas(state, payload) {
      state.isCanvasShow = payload;
    },
    changeShare(state, payload) {
      state.isShare = payload;
    },
    changeTimePicker(state, payload) {
      state.showTimePicker = payload;
    },
    changeProgramPicker(state, payload) {
      state.showProgramPicker = payload;
    },
    changeShowLoading(state, payload) {
      state.showLoading = payload;
    }
  }
};

const form = {
  state: () => ({ account: "", name: "" }),
  mutations: {
    changeForm(state, payload) {
      state.account = payload.account;
      state.name = payload.name;

      // state = { ...state, ...payload };
    }
  }
};

const app = {
  state: () => ({
    isLogin: false,
    env: "h5",
    correspond: null,
    ruleContent: "",
    dptDate: "",
    project: "",
    bs: ""
  }),
  mutations: {
    changeIsLogin(state, payload) {
      state.isLogin = payload;
    },
    changeEnv(state, payload) {
      state.env = payload;
    },
    changeCorrespond(state, payload) {
      state.correspond = payload;
    },
    changeRuleContent(state, payload) {
      state.ruleContent = payload;
    },
    changeDptDate(state, payload) {
      state.dptDate = payload;
    },
    changeProject(state, payload) {
      state.project = payload;
    },
    changeBs(state, payload) {
      state.bs = payload;
    }
  }
};

const store = new Vuex.Store({
  modules: {
    mainPage,
    winList,
    prizeListM,
    app,
    form,
    modalStatus
  }
});

export default store;
